<template>
    <div class='warning_warp '>
        <div class="table_wrap">
            <el-tabs 
                tab-position="left" 
                class="link_tabs" 
                type="border-card" 
                v-loading="loading" 
                element-loading-text="加载中……"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.5)">
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-s-data"></i> 用户列表</span>
                    <div class="meanTab">
                        <el-button type="primary" @click='addUser' style="margin-bottom:10px;float: right;">添加用户</el-button>
                        <el-table
                            :data="tableData"
                            height="800"
                            style="width: 100%"
                        >
                            <el-table-column
                                prop="name"
                                label="用户名称" 
                            >
                            </el-table-column>
                            <el-table-column
                                prop="limit"
                                label="用户权限"
                                width="150px">
                            </el-table-column>
                            <el-table-column
                                prop="telephone"
                                label="电话"
                                width="150px">
                            </el-table-column>
                            <el-table-column
                                prop="job"
                                label="职位"
                                width="200px">
                            </el-table-column>
                            <el-table-column
                                prop="department"
                                label="部门"
                                width="200px">
                            </el-table-column>
                            <el-table-column
                                label="编辑"
                                width="200px">
                                <template slot-scope="scope">
                                    <el-button @click.native.prevent = 'editItem(scope.$index , tableData)' 
                                    type="primary" 
                                    size="small"
                                    v-if=" (userName == scope.row.name || scope.row.show == 1) || userName == 'tiger'"
                                    >编辑</el-button>
                                    <el-button @click.native.prevent = 'deleteItem(scope.$index , tableData)' 
                                    type="danger" 
                                    size="small" 
                                    v-if=" userName != scope.row.name && scope.row.show == 1 || (userName == 'tiger' && scope.row.name != 'tiger')"
                                    >删除</el-button>
                                </template>   
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane>
                    <span slot="label"><i class="el-icon-s-data"></i> 操作记录</span>
                    <div class="meanTab">
                        <div class="user_histfond">
                            <el-date-picker
                                v-model="bdate"
                                type="datetime"
                                value-format="timestamp"
                                placeholder="选择日期时间"
                                :picker-options="pickerOptionsStart"
                                style="margin-right: 10px;">
                            </el-date-picker>至
                            <el-date-picker
                                v-model="edate"
                                type="datetime"
                                value-format="timestamp"
                                placeholder="选择日期时间"
                                :picker-options="pickerOptionsEnd"
                                style="margin-left: 10px;">
                            </el-date-picker>
                            <el-button @click="search" type="primary" class="demonstration" style="margin-left:30px">搜索</el-button>
                        </div>
                        <el-table
                            :data="tableHistory"
                            height="770"
                            style="width: 100%">
                            <el-table-column
                                type="index"
                                label="序列号"
                                width="100px">
                                <template>
                                </template>   
                            </el-table-column>
                            <el-table-column
                                prop="time"
                                label="操作时间"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="user"
                                label="用户名称" 
                            >
                            </el-table-column>
                            <el-table-column
                                prop="type"
                                label="操作类型" 
                            >
                            </el-table-column>
                            <el-table-column
                                prop="content"
                                label="操作记录" 
                            >
                            </el-table-column>
                        </el-table> 
                        <div class="page_wrap">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                @current-change="handleCurrentChange"
                                :key="pageref"
                                :page-size= "pageSize"
                                :total="allPage">
                            </el-pagination>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>    
        <!-- 弹窗表单 -->
        <el-dialog 
            title="用户编辑" 
            :visible.sync="dialogFormVisible"
            :append-to-body = 'true'>
            <el-form :model="activeObj"  :rules="rules"  class="useradd">
                <!-- readonly只读 -->
                <el-form-item 
                    label="用户名" 
                    :label-width="laWidth" prop="name">
                    <el-input 
                        v-model="activeObj.name" 
                        autocomplete="off"
                        :readonly = " edit ? false : 'readonly'"
                        :disabled="edit == false"
                        maxlength="10"
                    >
                    </el-input>
                </el-form-item>
                <div class="user_add_fixed">
                    <el-form-item 
                        label="密码" 
                        :label-width="laWidth">
                        <el-input 
                            v-model="activeObj.pwd" 
                            type='password'
                            autocomplete="off"
                            maxlength="8"
                            v-if="edit == true"
                        >
                        </el-input>
                        <el-button
                            type="primary" 
                            size="small"
                            @click="editPass()"
                            v-if="edit == false">
                            修改密码
                        </el-button>
                    </el-form-item>
                    <el-form-item 
                        label="权限" 
                        :label-width="laWidth" prop="limit">
                        <el-select v-model="activeObj.limit" placeholder="请选择用户权限" :disabled="edit == false">
                            <el-option label="高级管理员" value="0" v-if="this.Grade == '首次进入' || userName == 'tiger'"></el-option>
                            <el-option label="普通管理员" value="1" v-if="this.Grade != '首次进入'"></el-option>
                            <el-option label="普通用户" value="2" v-if="this.Grade != '首次进入'"></el-option>
                            <el-option label="第三方用户" value="3" v-if="this.Grade != '首次进入'"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                
                <div class="user_add_fixed">
                    <el-form-item 
                        label="职位" 
                        :label-width="laWidth" prop="job">
                        <el-input 
                            v-model="activeObj.job" 
                            maxlength="11"
                        >
                        </el-input >
                    </el-form-item>
                    <el-form-item 
                        label="部门" 
                        :label-width="laWidth" prop="department">
                        <el-input 
                            v-model="activeObj.department" 
                            maxlength="11"
                        >
                        </el-input >
                    </el-form-item>
                </div>
                <div class="user_add_fixed">
                    <el-form-item 
                        label="电话" 
                        :label-width="laWidth" prop="telephone">
                        <el-input 
                            v-model="activeObj.telephone" 
                            maxlength="11"
                        >
                        </el-input >
                    </el-form-item>
                    <el-form-item 
                        label="特殊编码" 
                        :label-width="laWidth" prop="encode" v-if="activeObj.limit == '3' || activeObj.limit == '第三方用户'">
                        <el-input 
                            v-model="activeObj.encode" 
                            autocomplete="off"
                            onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
                            :readonly = " edit ? false : 'readonly'"
                            :disabled="edit == false"
                            maxlength="20"
                        >
                        </el-input>
                    </el-form-item>
                </div>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog 
            title="修改密码" 
            :visible.sync="dialogFormpassword"
            :append-to-body = 'true'>
            <el-form :model="modify"  class="useradd">
                <el-form-item 
                    label="请输入原密码" 
                    label-width="130px" prop="pwd"
                    v-if="userName == activeObj.name || (activeObj.limit == '高级管理员' && this.Grade == '高级管理员' && this.userName != 'tiger')">
                    <el-input 
                        v-model="modify.oldpwd" 
                        type='password'
                        autocomplete="off"
                        maxlength="8"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item 
                    label="请输入新密码" 
                    label-width="130px" prop="pwd">
                    <el-input 
                        v-model="modify.newpwd" 
                        type='password'
                        autocomplete="off"
                        maxlength="8"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item 
                    label="请重复输入新密码" 
                    label-width="130px" prop="pwd">
                    <el-input 
                        v-model="modify.newpwdre" 
                        type='password'
                        autocomplete="off"
                        maxlength="8"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pwdSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogFormVisible:false,
            dialogFormpassword:false,
            value3:'',
            laWidth:"80px",
            loading:false,
            tableData:[],
            tableHistory:[],
            activeObj:{
                name:"",
                pwd:"",
                limit:'普通用户',
                telephone:"",
                job:"",
                department:"",
                encode:""
            },
            edit:false,
            modify:{
                oldpwd:'',
                newpwd:'',
                newpwdre:'',
            },
            Grade:'',//用户权限
            userName:'',//当前登录用户名
            rules: {
                 pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入用户姓名', trigger: 'blur' },
                ],
                limit: [
                    { required: true, message: '请选择用户权限', trigger: 'blur' },
                ]
            },
            bdate: '',
            edate: this.getCurrentTimestampInSeconds(),
            pageSize:12,
            allPage:0,
            pageref:0,
            pickerOptionsStart: {
                disabledDate: time => {
                let endDateVal = this.edate;
                if (endDateVal) {
                    return time.getTime() > new Date(endDateVal).getTime();
                }
                }
            },
            pickerOptionsEnd: {
                disabledDate: time => {
                let beginDateVal = this.bdate;
                if (beginDateVal) {
                    return time.getTime() < new Date(beginDateVal).getTime();
                }
                }
            },
        }
    },
    created() {
      this.Grade = localStorage.getItem("当前用户权限")
      this.getUsers()
        
    },
    computed:{
          afterBetime() {
            return this.bdate === 0 ? 0 : this.bdate / 1000;
            },
        afterEtime() {
            return this.edate === 0 ? 0 : this.edate / 1000;
        }
    },
    methods: {
        getCurrentTimestampInSeconds() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1; // 注意月份是从0开始的
            const day = now.getDate();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            return new Date(year, month - 1, day, hours, minutes, seconds).getTime();
        },
        editItem(index){
            this.edit = false;
            this.activeObj =  this.tableData[index];
            this.dialogFormVisible = true;
        },
        addUser(){
            this.activeObj = {
                name:"",
                pwd:"",
                limit:'普通用户',
                telephone:"",
                job:"",
                department:"",
            }
            if(this.Grade == '首次进入'){
                this.activeObj.limit = '高级管理员'
            }
            this.edit = true;
            this.dialogFormVisible = true;
        },
        addSubmit(){
            if(this.edit == true){
                if(this.activeObj.name.length < 2 || this.activeObj.name.length > 9 ){
                    this.$message('用户名称长度为2~9之间')
                    return
                }
                if(this.activeObj.pwd.length == 0){
                    if(this.activeObj.limit == '第三方用户' || this.activeObj.limit == '3'){

                    }else{
                        this.$message('请设置用户密码')
                        return
                    }
                }else{
                    if(this.activeObj.pwd.length < 5 || this.activeObj.pwd.length > 13 ){
                        this.$message('用户密码长度为5~13之间')
                        return
                    }
                }
                if(this.activeObj.limit == '第三方用户' || this.activeObj.limit == '3'){
                    if(this.activeObj.encode.length == 0){
                        this.$message('请设置特殊编码')
                        return
                    }else{
                        var o = {
                            department:this.activeObj.department,
                            job:this.activeObj.job,
                            limit:this.activeObj.limit,
                            name:this.activeObj.name,
                            pwd:this.activeObj.pwd,
                            telephone:this.activeObj.telephone,
                            encode:this.activeObj.encode,
                        }
                    }
                }else{
                    var o = {
                        department:this.activeObj.department,
                        job:this.activeObj.job,
                        limit:this.activeObj.limit,
                        name:this.activeObj.name,
                        pwd:this.activeObj.pwd,
                        telephone:this.activeObj.telephone,
                    }
                }
                if(o.limit == '高级管理员' || o.limit == '0'){
                    o.limit = 'all'
                }else if(o.limit == '普通管理员' || o.limit == '1'){
                    o.limit = 'administrators'
                }else if(o.limit == '普通用户' || o.limit == '2'){
                    o.limit = 'tourist'
                }else if(o.limit == '第三方用户' || o.limit == '3'){
                    o.limit = 'thirdparty'
                }
                var ss = ''
                if(this.Grade == '首次进入'){
                    var params = {
                        'setuserinfo':[o]
                    }
                    ss = '首次进入'
                }else{
                    var params = {
                        'setuserinfo':[o],
                        [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                    }
                }
                this.$http.post(this.$baseUrl,params).then((res)=>{
                    if(res.data.result == 'ok' ){
                        this.$message('添加成功');
                        // this.$router.push({'path':'/'});
                        this.getUsers()
                        this.dialogFormVisible = false
                        if(ss == '首次进入'){
                            setTimeout(()=>{
                                location.reload() // 重新加载页面
                            },1000)
                        }
                    }
                    
                })
            }else{
                if(o.limit == '第三方用户' || o.limit == '3'){
                    var o = {
                        department:this.activeObj.department,
                        job:this.activeObj.job,
                        limit:this.activeObj.limit,
                        name:this.activeObj.name,
                        telephone:this.activeObj.telephone,
                        encode:this.activeObj.encode,
                    }
                }else{
                    var o = {
                        department:this.activeObj.department,
                        job:this.activeObj.job,
                        limit:this.activeObj.limit,
                        name:this.activeObj.name,
                        telephone:this.activeObj.telephone
                    }
                }
                if(o.limit == '高级管理员' || o.limit == '0'){
                    o.limit = 'all'
                }else if(o.limit == '普通管理员' || o.limit == '1'){
                    o.limit = 'administrators'
                }else if(o.limit == '普通用户' || o.limit == '2'){
                    o.limit = 'tourist'
                }else if(o.limit == '第三方用户' || o.limit == '3'){
                    o.limit = 'thirdparty'
                }
                var params = {
                    'setuserinfo':[o],
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.$http.post(this.$baseUrl,params).then((res)=>{
                    if(res.data.result == 'ok' ){
                        this.$message('修改成功');
                        this.getUsers()
                        this.dialogFormVisible = false
                    }else{
                        this.$notify({
                            title: '修改失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }
                    
                })
            }
            
            
        },
        deleteItem(index,data){
            this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var params = {
                    "deleteuser":[{"name":data[index].name}],
                    [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                }
                this.$http.post(this.$baseUrl,params).then((res)=>{
                    if(res.data.result == 'ok' ){
                        this.$message('删除成功');
                        this.getUsers()
                    }else{
                        this.$notify({
                            title: '删除失败',
                            type: 'warning',
                            duration: 1500
                        });
                    }
                })
            }).catch(() => {
                this.$notify({
                    title: '已取消删除',
                    type: 'warning',
                    duration: 1500
                });        
            });
            
        },
        getUsers(){ 
            this.userName = localStorage.getItem("_username")
            this.$http.post(this.$baseUrl,{
                "getuserlist":"",
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }).then((res)=>{
                if(res.data.result =='ok'){
                    var arr = []
                    for(var i = 0; i < res.data.getuserlist.length; i++){
                        var mode = {
                            ctime:res.data.getuserlist[i].ctime,
                            department:res.data.getuserlist[i].department,
                            encode:res.data.getuserlist[i].encode == undefined ? '':res.data.getuserlist[i].encode,
                            job:res.data.getuserlist[i].job,
                            limit:res.data.getuserlist[i].limit,
                            name:res.data.getuserlist[i].name,
                            telephone:res.data.getuserlist[i].telephone,
                            show:0,//标记位，编辑删除根据权限高低是否显示   1可以删除编辑  0不可以删除编辑
                        }
                        if(mode.limit == 'all'){
                            mode.limit = "高级管理员";
                        }else if(mode.limit == 'administrators'){
                            mode.limit = "普通管理员";
                        }else if(mode.limit == 'tourist'){
                            mode.limit = "普通用户";
                        }else if(mode.limit == 'thirdparty'){
                            mode.limit = "第三方用户";
                        }
                        if(this.Grade == '高级管理员'){
                            if(this.userName == 'tiger'){//判断当前账号是tiger   开放所有权限
                                mode.show = 0;
                            }else{
                               if(mode.limit == '高级管理员' ){
                                    mode.show = 0;
                                }else{
                                    mode.show = 1; 
                                } 
                            }
                            
                        }else if(this.Grade == '普通管理员'){
                            if(mode.limit == '高级管理员' || mode.limit == '普通管理员'|| mode.limit == '第三方用户'){
                                mode.show = 0;
                            }else{
                                mode.show = 1;
                            }
                        }
                        arr.push(mode);
                    }
                    this.tableData = arr;
                }else if(res.data.result =='No access rights.'){
                }
                
            })  
        },
        getlogin(){
            
        },
        editPass(){
            this.dialogFormpassword = true
            this.modify = {
                oldpwd:'',
                newpwd:'',
                newpwdre:'',
            }
        },
        pwdSubmit(){
            // 需要输入原密码
            if(this.userName == this.activeObj.name || (this.Grade == '高级管理员' && this.activeObj.limit == '高级管理员' && this.userName != 'tiger')){
                if(this.modify.oldpwd == '' || this.modify.newpwd == '' || this.modify.newpwdre == ''){
                    this.$notify({
                        title: '密码不能为空',
                        type: 'warning',
                        duration: 1500
                    });
                    return false
                }else{
                    if(this.modify.oldpwd == this.modify.newpwd){
                        this.$notify({
                            title: '新密码不可与旧密码一致',
                            type: 'warning',
                            duration: 1500
                        });
                        return false
                    }else{
                        if(this.modify.newpwd != this.modify.newpwdre){
                            this.$notify({
                                title: '两次密码输入不一致',
                                type: 'warning',
                                duration: 1500
                            });
                            return false
                        }else{
                            var o = {
                                name:this.activeObj.name,
                                oldpwd:this.modify.oldpwd,
                                pwd:this.modify.newpwd,
                            }
                            
                        }
                    }
                    
                }
            }else{ // 不需要输入原密码
                if(this.modify.oldpwd == this.modify.newpwd){
                    this.$notify({
                        title: '新密码不可与旧密码一致',
                        type: 'warning',
                        duration: 1500
                    });
                    return false
                }else{
                    if(this.modify.newpwd != this.modify.newpwdre){
                        this.$notify({
                            title: '两次密码输入不一致',
                            type: 'warning',
                            duration: 1500
                        });
                        return false
                    }else{
                        var o = {
                            name:this.activeObj.name,
                            pwd:this.modify.newpwd,
                        }
                    } 
                }
            }
            var params = {
                'setuserinfo':[o],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl,params).then((res)=>{
                if(res.data.result == 'ok' ){
                    this.$message('修改成功');
                    this.dialogFormpassword = false
                }else if(res.data.result == 'password check failed.'){
                    this.$notify({
                        title: '原密码错误',
                        type: 'warning',
                        duration: 1500
                    });
                }else{
                    this.$notify({
                        title: '修改失败',
                        type: 'warning',
                        duration: 1500
                    });
                }
            })
        },
        // 分页请求
        handleCurrentChange(page){
            this.$store.commit("changLoading", true);
            this.nowPage = page - 1;
            this.search(1);
        },
        //搜索
        search(val){
            var pages =0
            if(val == 1){
                pages = this.nowPage
            }else{
                this.nowPage = 0
                pages = 0
                this.pageref++
            }
            if(this.afterBetime == ''){
                this.afterBetime = 0
            }
            if(this.afterEtime == ''){
                this.$notify({
                    title: '请选择结束时间',
                    type: 'warning',
                    duration: 1500
                });
                return false
            }
            var params = {
                "getoperaterecord":{
                    "btime":this.afterBetime,
                    "etime":this.afterEtime,
                    "size":this.pageSize,
                    "page":pages
                },
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
                };
            this.$http.post(this.$baseUrl,params).then((res)=>{
                for (let index = 0; index < res.data.getoperaterecord.length; index++) {
                    res.data.getoperaterecord[index].time = this.formatDate(res.data.getoperaterecord[index].time*1000, 'YYYY-MM-DD H:m:s');                       
                }
                this.tableHistory = res.data.getoperaterecord
                this.allPage =  res.data.count;
            })
            
        }
    },
}
</script>

<style scoped>
/* 联动子项与选项卡样式 */
.warning_warp{
    width: 100%;
    height: 900px;
}
.table_wrap{
    width: 100%;
    height: 100%;
    /* background: #7f94ad; */
}
.link_tabs{
    background: #9bc0db14;
    height: 100%;
    border: 1px solid #45596a;
}
/deep/ .el-tabs__item{
    height: 60px;
    line-height: 60px;
}
/deep/ .el-tabs--border-card>.el-tabs__header{
    background-color:#0000;
    border-bottom: 1px solid #45596a;
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item{
    font-size: 16px;
}
/deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    color: #ffffff;
    background-color: #334b5e;
    border-right-color: #45596a;
    border-left-color: #45596a;
}
/deep/ .el-dialog__body,.el-button{
    color: #fff !important;
}
/* /deep/.warning_link .el-input {
    width: 80%;
}    */
    /deep/ .useradd .el-input__inner {
        /* background: none !important; */
        border: none !important;
        height: 30px !important;
        line-height: 30px !important;
    }
    .button{
        float: right;
        margin-top: 20px;
    }
    /deep/ .el-table--border th{
        background: rgba(35, 78, 107, 0.6);
        color: #fff;
    }
    /deep/ .el-table th, /deep/  .el-table tr{
        background-color: transparent !important;
        color: #fff;
    }
    /deep/ .el-table, .el-table__expanded-cell{
        background-color: transparent !important;
    }
    /deep/ .el-table__header-wrapper{
        /* background-color: #5f7998 !important; */
        background-color: #5981a533 !important;
        border: 1px solid #475c6f;
        border-bottom: none;
    }
    /deep/ .is-scrolling-none{
        /* background: #4e6888 !important; */
            background: rgba(89,129,165,.4) !important;
    }
    /deep/ .el-table td, .el-table th.is-leaf{
        border-bottom: 1px solid #ebeef542;
        background-color: transparent !important;
    }
    /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{
        background: #7f94ad;
    }
    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #4e6888;
    }
    
    /deep/ .el-table tr th.is-leaf{
        border: none;
    }
    /deep/ .el-table--border{
        border: none;
    }
    
     /* 清除底部横线 */
    .el-table::before {
        height: 0px;
    }
    .el-table--border::after{
        display: none;
    }
 /deep/ .el-button{
        background: rgba(89, 129, 165, 0.8);
        border: none;
    }
    /deep/ .el-dialog {
  background: rgba(79, 112, 151, 0.4) !important;
}
/deep/ .el-dialog__header {
  background: rgba(0, 0, 0, 0.2);
  color: #fff !important;
}
/deep/ .el-dialog__header .el-dialog__title {
  color: #fff !important;
}
/deep/ .el-form-item__label {
  color: #fff !important;
}
/deep/ .el-dialog__body{
        padding: 30px 0px 30px 40px;
}
.user_histfond{
    height: 60px;
}
/deep/ .user_histfond .el-input__inner{
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    width: 100%;
    color: #fff;    
}
.useradd{
    width: 80%;
}
.user_add_fixed{
    display: flex;
}
.user_add_fixed .el-form-item{
    width: 50%;
}
.page_wrap{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: right;
}
@media screen and (max-width:1280px) {
    /deep/ .el-dialog{
        width: 90%;
    }
}
</style>